<script setup lang="ts">
import closeBtn from "@/assets/icons/close-white.svg";
import { ref } from "vue";
import { getAssetsFile } from "@/utils/map";

const isShow = ref(true);
const emitEvents = defineEmits(["toggleShowLegend"]);
const props = defineProps({
  deviceCategoryList: {
    type: { point: Array<any>, line: Array<any> },
  },
});
const close = () => {
  emitEvents("toggleShowLegend");
};
const data = reactive([
  {
    id: 1,
    label: "管点图例",
    children: [],
  },
  {
    id: 2,
    label: "管段图例",
    children: [],
  },
]);

onMounted(async () => {
  const pointNodes = props.deviceCategoryList.point.map((item: any) => {
    const { className, classId, image } = item;
    const iconUrl = getAssetsFile("device/" + image + ".png");
    return {
      isPoint: true,
      iconUrl,
      id: classId,
      label: className,
    };
  });
  const lineNodes = props.deviceCategoryList.line.map((item: any) => {
    const { className, classId, image } = item;
    return {
      isLine: true,
      image,
      id: classId,
      label: className,
    };
  });
  data[0].children = pointNodes;
  data[1].children = lineNodes;
});
const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<template>
  <div class="legend" v-if="isShow">
    <div class="title">
      <span>图例展示</span>
      <img :src="closeBtn" alt="" class="close" @click="close" />
    </div>
    <el-tree
      class="tree"
      node-key="id"
      :data="data"
      :props="defaultProps"
      defaultExpandAll
    >
      <template #default="{ data }">
        <div class="custom-tree-node">
          <img
            class="imgTag"
            v-if="data.isPoint === true"
            :src="data.iconUrl"
            alt=""
          />
          <span
            class="colorTag"
            v-if="data.isLine"
            :style="'background:' + data.image"
          ></span>
          <span class="pl-1">{{ data.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<style scoped lang="scss">
.legend {
  position: absolute;
  right: 47px;
  bottom: 90px;
  z-index: 1000;
  width: 268px;
  height: 640px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(16 16 16 / 100%);
  text-align: center;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(25 144 255 / 100%);
  border-radius: 3px;
}

.title {
  height: 25px;
  line-height: 25px;
  color: rgb(255 255 255 / 100%);
  text-align: center;
  background-color: rgb(25 144 255 / 100%);
  border: 1px solid rgb(255 255 255 / 100%);
  border-radius: 3px;

  .close {
    position: relative;
    top: 1px;
    right: 5px;
    float: right;
    cursor: pointer;
  }
}

::-webkit-scrollbar {
  width: 3px;
}

.tree {
  height: 580px;
  margin: 20px 8px 8px 20px;
  overflow-y: auto;

  .imgTag {
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
  }

  .colorTag {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 6px;
  }
}
</style>
